<template>
  <div>
    <template v-if="userinfo">
      <img
        v-if="userinfo.avator"
        @click="uploadAction"
        class="avatar"
        :src="userinfo.avatar.replace(/public/, $baseURL)"
        alt=""
      />
    </template>
      <img @click="$router.push({name:'login'})" v-else class="avatar" :src="require('@/assets/logo.png')" alt="" />
    <input type="file" @change="startUpload" class="inputfile" ref="upload" />
  </div>
</template>


<script>
import loginVue from "../login/login.vue";
export default {
  name: "uploadAvatar",
  methods: {
    uploadAction() {
      this.$refs.upload.click();
    },
    startUpload() {
      var file = this.$refs.upload.files[0]; //上传的文件对象
      // console.log(file);
      var data = new FormData(); //上传文件需要表单对象，通过js来实例化一个表单对象
      data.append("avator", file);
      this.$ajax.sendAvatar(data).then((res) => {
        if (res.code == 200) {
          this.changeUserInfo({
            avator: res.avatar,
          });
        }
      });
    },
  },
  data() {
    return {
    };
  },
  mounted() {},
};
</script>


<style lang="scss" scoped>
.avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}
.inputfile {
  display: none;
}
</style>